<template>
  <div class="homeSwiper">
    <div class="right-info">
      <div class="fTitle"><span>数字化成长空间</span></div>
      <div class="xcxImg"></div>
      <div class="sTitle">网上学习是为了让你在高科技领域找到一份高薪工作，一起快乐学习吧</div>
    </div>
    <div class="home-carouselBox">
      <el-carousel height="300px" :interval="3000" arrow="always">
        <el-carousel-item v-for="(item, index) in items" :key="index">
          <div class="studentPic">
            <img :src="item.src" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { src: 'https://codelover.club/stutasks/1618904954112_1.jpg' },
          { src: 'https://codelover.club/stutasks/1618904954101_2.jpg' },
          { src: 'https://codelover.club/stutasks/1618904954138_3.jpg' },
          { src: 'https://codelover.club/stutasks/1618903429852_4.jpg' },
          { src: 'https://codelover.club/stutasks/1618904954162_5.png' },
        ],
      };
    },
  };
</script>
<style>
  .homeSwiper {
    margin: 50px auto 28px;
    display: flex;
    width: 1070px;
    height: 300px;
    background-image: linear-gradient(180deg, rgba(0, 146, 243, .5), rgba(7, 61, 96, .1));
    box-shadow: 6px 10px 6px 0 rgba(19, 18, 18, .16);
    border-radius: 8px;
    overflow: hidden
  }

  .homeSwiper .right-info {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 590px
  }

  .homeSwiper .right-info .fTitle {
    width: 400px;
    font-family: Segoe UI;
    font-size: 40px;
    color: #707070;
    margin-left: 110px;
  }

  .homeSwiper .right-info .xcxImg {
    width: 180px;
    height: 180px
  }

  .homeSwiper .right-info .xcxImg img {
    width: 100%;
    height: 100%;
    /* mix-blend-mode: multiply */
  }

  .homeSwiper .right-info .sTitle {
    display: none;
    width: 400px;
    margin-top: 30px;
    font-family: Segoe UI;
    font-size: 22px;
    color: #707070
  }

  .homeSwiper .home-carouselBox {
    flex: 1;
    display: flex;
    flex-flow: column
  }

  .homeSwiper .home-carouselBox .el-carousel {
    flex: 1
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container {
    position: relative;


    flex-direction: row;
    height: 100%;
    width: 100%;
    overflow: hidden
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__arrow--left,
  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__arrow--right {
    bottom: 11px;
    top: unset;
    width: 38px;
    height: 50px;
    background-color: rgba(157, 185, 203, .5);
    border-radius: 2px;
    border: 1px solid hsla(0, 1.6%, 88%, .5)
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container i:before {
    font-size: 36px
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__arrow--left {
    border-left: none;
    left: 1px
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__arrow--right {
    border-right: none;
    right: 1px
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__arrow--left:hover,
  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__arrow--right:hover {
    background: hsla(0, 0%, 96.1%, .5)
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .carouselBorder {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px;
    opacity: .5
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__item .studentPic {
    height: 300px;

  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__item .studentPic img {
    -o-object-fit: cover;

    object-fit: cover;
    width: 100%;
    height: 100%
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__item .studentInfo {
    position: absolute;
    bottom: 36px;
    left: 50%;
    right: 50%;
    transform: translate(-50%);
    width: 100%;
    text-align: center
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__item .studentInfo .name {
    font-family: Segoe UI;
    font-size: 18px;
    font-weight: 700;
    color: #707070
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__item .studentInfo .occupation,
  .homeSwiper .home-carouselBox .el-carousel .el-carousel__container .el-carousel__item .studentInfo .tpye {
    font-family: Segoe UI;
    font-size: 16px;
    color: #707070
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__indicators {
    margin-bottom: 10px
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__indicators .el-carousel__indicator {
    padding: 0;
    margin-left: 15px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__indicators .el-carousel__indicator .el-carousel__button {
    opacity: 0
  }

  .homeSwiper .home-carouselBox .el-carousel .el-carousel__indicators .is-active {
    width: 40px;
    background-color: #fea91b;
    border-radius: 10px
  }

  @media only screen and (max-width: 975px) {
    .right-info {
      flex: 1
    }

    .home-carouselBox {
      display: none !important
    }
  }

  @media only screen and (max-width: 975px) {
    .mall .right-info {
      flex: 1
    }

    .mall .home-carouselBox {
      display: none !important
    }
  }

  @media only screen and (max-width: 1070px) {
    .homeSwiper {
      width: auto !important
    }
  }

  @media only screen and (max-width: 1070px) {
    .mall .homeSwiper {
      width: auto !important
    }
  }

  .el-carousel--horizontal {
    overflow-x: hidden
  }

  .xcxImg {
    background: url(../../assets/111.jpg );
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    background-size: cover;
  }
</style>